<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>拖动效果</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			#box {
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
			}

		</style>
	</head>
	<body>
		
		<div id="box"></div>


	</body>
</html>
<script>
	
	// 获取元素
	var boxDiv = document.getElementById('box');

	boxDiv.onmousedown = function(e) {

		var x = e.clientX - boxDiv.offsetLeft;
		var y = e.clientY - boxDiv.offsetTop;

		document.onmousemove = function(e) {
			boxDiv.style.left = e.clientX - x + 'px';
			boxDiv.style.top = e.clientY - y + 'px';
		};

		document.onmouseup = function() {
			document.onmousemove = null;
		};

	};
	







</script>